<template>
  <div class="container">
    <van-nav-bar
      title="来料检验详情"
      fixed
      class="titleStyle"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="publicBox">
      <div class="checkInputTop">
        <div class="checkInputTopCont">
          <h1>
            <span>到货单号：{{ detailsObj.invoiceNo }}</span>
          </h1>
          <ul>
            <li>
              <div>
                <b>品名</b>
                <em>
                  <van-field
                    v-model="detailsObj.materialName"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>料号</b>
                <em>
                  <van-field
                    v-model="detailsObj.materialCode"
                    readonly
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>规格</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="detailsObj.specifications"
                      readonly
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>送检日期</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="detailsObj.carryCheckAt"
                      readonly
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>送检数量</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="detailsObj.incomingNum"
                      readonly
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>批号</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="detailsObj.planBatchNo"
                      readonly
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>供方检验员</b>
                <em>
                  <van-field
                    v-model="ruleForm.supplierCheckName"
                    size="mini"
                    readonly
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>抽样数</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="ruleForm.checkNum"
                      type="number"
                      readonly
                      placeholder="请输入数字"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>入库数量</b>
                <em>
                  <van-cell-group>
                    <van-field
                      v-model="ruleForm.inWarehouseNum"
                      readonly
                      type="number"
                      placeholder="请输入数字"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="checkContent">
        <el-table
          :style="{
            borderColor: '#ccc',
            'border-right': '1px solid #ccc',
            'border-bottom': '1px solid #ccc',
          }"
          :data="tableData"
          border
          height="100%"
          :cell-style="{ borderColor: '#ccc' + ' !important' }"
          :header-cell-style="{
            background: '#fff !important',
            borderColor: '#ccc' + ' !important',
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50px"
            align="center"
          />
          <el-table-column
            align="center"
            prop="itemName"
            label="检验项目"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="difference"
            label="标准值"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="upperDifference"
            label="上差"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="lowerDifference"
            label="下差"
            min-width="100px"
            show-overflow-tooltip
          />
          <el-table-column label="实测结果" align="center">
            <el-table-column
              v-for="(itx, index) in tableData.length > 0
                ? tableData[0].mttrs
                : ''"
              :key="index"
              width="120"
            >
              <template slot="header">{{ itx.name }}</template>
              <template #default="{ row }">
                {{ row.mttrs[index].value }}
                <!-- 自动 -->
                <!-- <van-field
                  v-model="row.mttrs[index].value"
                  readonly
                  :formatter="formatter"
                  type="number"
                  :style="{
                    background: row.difference &&
                      row.lowerDifference &&
                      row.upperDifference &&
                      row.mttrs[index].value >=
                        Number(row.difference) - Number(row.lowerDifference) &&
                      row.mttrs[index].value <=
                        Number(row.difference) + Number(row.upperDifference)
                        ? ''
                        : 'red',
                  }"
                /> -->
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            prop="actualValue"
            label="实测范围"
            width="100px"
            show-overflow-tooltip
          >
            <template #default="{ row }">{{ row.actualValue }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="decide"
            label="判定"
            width="100px"
          >
            <template #default="{ row }">
              <div v-if="!row.isQualified" class="decideClass1">NG</div>
              <div v-else class="decideClass2">OK</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="checkInputTop">
        <div class="checkInputTopCont checkInputBottomCont">
          <h1>
            <span>结论：{{ detailsObj.checkResult }}</span>
          </h1>
          <ul>
            <li>
              <div>
                <b>检验员</b>
                <em>
                  <van-field
                    readonly
                    v-model="ruleForm.checkName"
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>检验日期</b>
                <em>
                  <van-field
                    readonly
                    v-model="ruleForm.checkAt"
                    @click="showTime1 = true"
                    size="mini"
                  />
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>审核</b>
                <em>
                  <van-cell-group>
                    <!-- approvedName -->
                    <!-- checkUserName -->
                    <van-field
                      v-model="ruleForm.approvedName"
                      size="mini"
                      readonly
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
            <li>
              <div>
                <b>审核日期</b>
                <em>
                  <van-cell-group>
                    <van-field
                      readonly
                      v-model="ruleForm.approvedAt"
                      @click="showTime2 = true"
                      size="mini"
                    />
                  </van-cell-group>
                </em>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { myFunction } from "../../../../utils/function";
export default {
  name: "FirstInspection",
  data() {
    return {
      cloneValue: {},
      cloneIndex: {},
      showHand: false,
      currentDate: new Date(),
      columnsHand: ["OK", "NG"],
      userList: [],
      itemList: [],
      ruleForm: {
        itemList: [],
        result: 1,
        qualifiedNum: null,
        unqualifiedNum: null,
        badNum: null,
        supplierCheckName: JSON.parse(localStorage.getItem("padUserInfo")).data
          .userName, // 检验人
        checkTime: myFunction(new Date()), // 检验时间
        supplierCheckBy: JSON.parse(localStorage.getItem("padUserInfo")).data
          .userId, // 本次检验
      },
      show: false,
      code: localStorage.getItem("code"),
      search: {
        current: 1,
        size: 5,
      },
      list: [],
      loading: false,
      isLoading: false,
      detailsObj: {},
      disabledResult: false,

      disabledYorNo: true,
      tableData: [],
    };
  },
  watch: {
    ruleForm: {
      deep: true,
      handler(row) {
        row.reportNum = this.detailsObj.reportNum;
        // row.checkNum = this.detailsObj.reportNum;
        // row.qualifiedNum =
        //   Number(this.detailsObj.reportNum) -
        //   Number(row.unqualifiedNum) -
        //   Number(row.badNum);
        // if (Number(row.unqualifiedNum) + Number(row.badNum) > row.checkNum) {
        //   this.$toast.fail("不合格数+废品数>检验数量，请核实！");
        //   row.unqualifiedNum = 0;
        //   row.badNum = 0;
        // }
        if (Number(row.unqualifiedNum) > 0 || Number(row.badNum) > 0) {
          this.disabledYorNo = false;
        } else {
          this.disabledYorNo = true;
        }
      },
    },
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    async getData(row) {
      this.detailsObj = this.$store.state.data;
      this.detailsObj.checkResult =
        this.$store.state.data.checkResult == 0 ? "不合格" : "合格";
      const res = await this.$axios.get(
        `/dobo-product/pro/incoming/check/incomingDetail?id=${this.$store.state.data.id}`
      );
      if (res.data.code === 200) {
        this.ruleForm = res.data.data;
        this.tableData = res.data.data.incomingCheckDetailList.map((i) => {
          const numbers = [
              i.measuredResultsFirst,
              i.measuredResultsSecond,
              i.measuredResultsThird,
              i.measuredResultsFourth,
              i.measuredResultsFifth,
            ],
            min = Number(i.difference) - Number(i.lowerDifference),
            max = Number(i.difference) + Number(i.upperDifference);
          return {
            ...i,
            decide: i.result == 1 ? "OK" : "NG",
            checkResult: i.checkResult == 0 ? "不合格" : "合格",
            isQualified: this.areAllInRange(
              numbers,
              min,
              max,
              i.inspectionMethod
            ),
            mttrs: [
              {
                name: "1#",
                value: i.measuredResultsFirst,
                isQualified: false,
              },
              {
                name: "2#",
                value: i.measuredResultsSecond,
                isQualified: false,
              },
              {
                name: "3#",
                value: i.measuredResultsThird,
                isQualified: false,
              },
              {
                name: "4#",
                value: i.measuredResultsFourth,
                isQualified: false,
              },
              {
                name: "5#",
                value: i.measuredResultsFifth,
                isQualified: false,
              },
            ],
          };
        });
      }
    },
    areAllInRange(numbers, min, max, type) {
      if (type == 1) {
        return numbers.every((x) => x == "OK");
      } else {
        return min && max && numbers.every((x) => x >= min && x <= max);
      }
    },
    /** 验证检验数量只可输入大于等于0 的整数 */
    formatter(value) {
      return value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, "$1$2.$3");
    },
    sum(arr) {
      return arr.reduce(function (prev, curr, idx, arr) {
        return prev + curr;
      });
    },

    // 返回
    onClickLeft() {
      const { query } = this.$route;
      if (query.path) {
        this.$router.push(`/${query.path}`);
      } else {
        this.$router.push("/IncomingInspectionDetails");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  .checkInputTopCont {
    padding: 5px;
    h1 {
      height: 35px;
      line-height: 35px;
      font-weight: normal;
      text-align: center;
      background: #eeee;
    }
    ul {
      li {
        width: 33.3333%;
        height: auto;
        b {
          width: 100%;
          text-align: left;
          height: 35px;
          line-height: 35px;
          font-size: 20px;
        }
        em {
          width: 100%;
          .van-cell {
            width: 98%;
          }
        }
      }
    }
  }
  .checkContent {
    border-left: 1px solid #ccc;
    height: 34%;
    // overflow: hidden;
  }
  .checkInputBottomCont {
    ul {
      li {
        width: 50%;
      }
    }
  }
}
</style>
<style lang="scss">
.checkContent {
  .el-table .el-table__cell {
    padding: 5px 0;
    .van-cell {
      padding: 5px;
      border: 1px solid #ccc;
    }
  }
}
.decideClass1 {
  width: 100%;
  height: 100%;
  background: red;
}
.decideClass2 {
  width: 100%;
  height: 100%;
  background: green;
}
</style>
